<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<script src="${ctxStatic}/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery.json.min.js" type="text/javascript"></script>
<script src="${ctx}/js/emailAutoComplete.js"></script>
<style type="text/css">
 /*tetxarea 样式*/
        .wordCount{ position:relative;width: 600px; }
        .wordCount textarea{ width: 100%; height: 100px;}
        .wordCount .wordwrap{ position:absolute; right: 6px; bottom: 6px;}
        .wordCount .word{ color: red; padding: 0 4px;;}
        
/*邮箱提示框样式*/

		ul, li {
			list-style:none;
		}
		.inputElem {
			width:198px;
			height:22px;
			line-height:22px;
			border:1px solid #ccc;
		}
		.parentCls {
			width:200px;
			height:auto; 
		}
		.parentCls ul{ padding-left: 10px; padding-right: 10px; }
		.auto-tip li { width: 100%; height: 30px; line-height: 30px; font-size: 14px;}
		.auto-tip li.hoverBg {
			background:#ddd;
			cursor:pointer;
		}

		.hidden {
			display:none;
		}
    </style>
 
<title>Insert title here</title>  
<script type="text/javascript" language="JavaScript">
       function submitUserList_3() {
            var customerArray = new Array();
            customerArray.push({id: "1", name: "李四", pwd: "123"});
            customerArray.push({id: "2", name: "张三", pwd: "332"});
            console.log(JSON.stringify(customerArray));
            console.log($("#dataForm").serializeArray());
            $.ajax({
                url: "/gsj/banner/banner8.do",
                type: "POST",
                contentType : 'application/json;charset=utf-8', //设置请求头信息
                dataType:"json",
//              data: JSON.stringify(customerArray),    //将Json对象序列化成Json字符串，JSON.stringify()原生态方法     用于从一个对象解析出字符串    JSON.parse()用于从一个字符串中解析出json对象
             	data: $.toJSON(customerArray),            //将Json对象序列化成Json字符串，toJSON()需要引用jquery.json.min.js
// 				data: $('#dataForm').serializeJson(),
                success: function(data){
                	console.log(data);
                },
                error: function(res){
                    alert(res.responseText);
                }
            });
        }
       
        //将表单序列化成json格式的数据(但不适用于含有控件的表单，例如复选框、多选的select)
        (function($){
            $.fn.serializeJson = function(){
                var jsonData1 = {};
                var serializeArray = this.serializeArray();
                // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
                $(serializeArray).each(function () {
                    if (jsonData1[this.name]) {
                        if ($.isArray(jsonData1[this.name])) {
                            jsonData1[this.name].push(this.value);
                        } else {
                            jsonData1[this.name] = [jsonData1[this.name], this.value];
                        }
                    } else {
                        jsonData1[this.name] = this.value;
                    }
                });
                // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
                var vCount = 0;
                // 计算json内部的数组最大长度
                for(var item in jsonData1){
                    var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
                    vCount = (tmp > vCount) ? tmp : vCount;
                }
                if(vCount > 1) {
                    var jsonData2 = new Array();
                    for(var i = 0; i < vCount; i++){
                        var jsonObj = {};
                        for(var item in jsonData1) {
                            jsonObj[item] = jsonData1[item][i];
                        }
                        jsonData2.push(jsonObj);
                    }
                    return JSON.stringify(jsonData2);
                }else{
                    return "[" + JSON.stringify(jsonData1) + "]";
                }
            };
        })(jQuery);
    </script>
</head>  
<body>
当前用户:<span style="color:red">
<sec:authentication property="name"/> </span>  
 <br>
 <a href="/gsj/logout">注销</a>
<a href="/gsj/banner/banner.do">学生列表</a>  
<a href="/gsj/banner/banner1.do?id=1234566">获取参数1</a>  
<a href="/gsj/banner/banner2.do?id=1234566">获取参数2</a>  
<a href="/gsj/banner/banner3.do?id=1234566">获取参数3</a>  
<a href="/gsj/banner/banner4.do?id=1234566">获取参数4</a>  
<a href="/gsj/banner/banner5.do?count=">获取参数5</a>  
<a href="/gsj/banner/banner6.do?count=888888">获取参数6</a>
<a href="/gsj/test.jsp">spring security测试页面</a>
<a href="/gsj/user/view.do">系统设置</a>
<a href="/gsj/banner/bannerEncode.do?name=hello测试">过滤设置</a>
<br>
<h1>所有的演示例子</h1>
<h3><a href="./dao.do?id=1">Dao正常错误</a></h3>
<h3><a href="./dao.do?id=10">Dao参数错误</a></h3>
<h3><a href="./dao.do">Dao未知错误</a></h3>
<br />
<h3><a href="./service.do?id=1">Service正常错误</a></h3>
<h3><a href="./service.do?id=10">Service参数错误</a></h3>
<h3><a href="./service.do?id=">Service未知错误</a></h3>
<br />
<h3><a href="./controller.do?id=1">Controller正常错误</a></h3>
<h3><a href="./controller.do?id=10">Controller参数错误</a></h3>
<h3><a href="./controller.do?id=">Controller未知错误</a></h3>
<br />
<h3><a href="./404.do?id=1">404错误</a></h3>
<!-- <form action="/gsj/banner/banner8.do" method="post"> -->
<form  method="post" id="dataForm">
<table>
<thead>
<tr>
<th>序号</th>
<th>名字</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2"><input type="button" value="Save" onclick="submitUserList_3();" /></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><input name="username" value="1" /></td>
<td><input name="password" value="张三" /></td>
</tr>
<tr>
<td><input name="username" value="2" /></td>
<td><input name="password" value="李四" /></td>
</tr>
<tr>
<td><input name="username" value="3" /></td>
<td><input name="password" value="王五" /></td>
</tr>
</tbody>
</table>
</form>

<input id="submit" type="button" value="多个对象转换成json数据提交" onclick="submitUserList_3();">

<br>
<br>
<br>

<div class="wordCount" id="wordCount">
    <textarea placeholder="textarea还剩余字数统计"></textarea>
    <span class="wordwrap"><var class="word">200</var>/200</span>
</div>
<span id="clock"></span>

<script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

<script>

    $(function(){



        //先选出 textarea 和 统计字数 dom 节点

        var wordCount = $("#wordCount"),

            textArea = wordCount.find("textarea"),

            word = wordCount.find(".word");

        //调用

        statInputNum(textArea,word);



    });

    /*

    * 剩余字数统计

    * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>

    */

    function statInputNum(textArea,numItem) {

        var max = numItem.text(),

            curLength;

        textArea[0].setAttribute("maxlength", max);

        curLength = textArea.val().length;

        numItem.text(max - curLength);

        textArea.on('input propertychange', function () {

            numItem.text(max - $(this).val().length);

        });

    }

</script>

<br/>
	<span>邮箱自动提示</span>
	<div class="parentCls">
		<input type="text" class="inputElem">
    </div>
  
  <a href="/gsj/banner/bannerDemo.do">banner Demo</a>
    <a href="/gsj/banner/bannerbaseSave.do">bannerbase新增测试</a>
  <a href="/gsj/banner/bannerPDF.do">在线pdf阅读</a>
  <a href="/gsj/banner/123.do">404错误页面</a>
 
 <br/>
 
 <form name="serForm" action="/gsj/banner/fileUpload1.do" method="post"  enctype="multipart/form-data">
<h3>采用流的方式上传文件</h3>
<input type="file" name="file">
<input type="submit" value="upload"/>
</form>
 
<form name="Form2" action="/gsj/banner/fileUpload2.do" method="post"  enctype="multipart/form-data">
<h3>采用multipart提供的file.transfer方法上传文件</h3>
<input type="file" name="file">
<input type="submit" value="upload"/>
</form>
 
<form name="Form2" action="/gsj/banner/fileUpload3.do" method="post"  enctype="multipart/form-data">
<h3>使用spring mvc提供的类的方法上传文件</h3>
<input type="file" name="file">
<input type="submit" value="upload"/>
</form>
</body>  
</html> 